<template>
  <div class="app-container">

    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基础信息" name="first">
      <div class="add-product">{{isEdit?'编辑产品':'添加产品'}}</div>
      <basic-message @replaceSpecs="replaceOpt" @backProductId="getProductId" @showBasicNum="getBasicShow"/>
    </el-tab-pane>
    <el-tab-pane label="价格/规格" name="second">
      <div class="add-product">{{isEdit?'编辑产品':'添加产品'}}</div>
      <specs  @replaceFaq="replaceOpt" :product_id="product_id" @showSpecsNum="getSpecsShow"/>

    </el-tab-pane>
    <el-tab-pane label="常见问答" name="third">
        <div class="add-product">{{isEdit?'编辑产品':'添加产品'}}</div>
        <f-a-q :product_id="product_id"/>
      </el-tab-pane>
  </el-tabs>

      <div class="form-fixed">
        <el-button icon="el-icon-s-management" class="disc-button" :disabled="isBasic&&isSpecs" @click="submitForm(product_id,0)">稍后上架</el-button>
        <el-button type="primary" icon="el-icon-document" :disabled="isBasic&&isSpecs" @click="submitForm(product_id,1)">保存并发布</el-button>
      </div>
  </div>
</template>

<script>

import { addProduct,getDatamap,getProductDetail,putProductDetail,putProductStatus} from '@/api/product'
export default {
  name: 'ProductAdd',
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    BasicMessage: () => import('@/components/product/basicMessage'),
    Specs: () => import('@/components/product/specs'),
    FAQ: () => import('@/components/product/faq')
  },
  
  data() {
    return {
      activeName:'first',//切换tab   
      product_id:0,
      isBasic: true,//当基本信息与规格都填写后 显示底边栏
      isSpecs: true
    }
  },
  created(){
    if(this.isEdit){
      this.isBasic = false
      this.isSpecs = false
    }
  },
  methods: {
    //当基本信息与规格都填写后 显示底边栏
    getBasicShow(val){
      console.log(val);
      
      this.isBasic = val
    },
    //
    getSpecsShow(val){
      console.log(val);
      this.isSpecs = val
    },
    //子传父组件 获取创建后的product_id
    getProductId(val){
     this.product_id = val
      
    },
    //子传父组件 handleClick otherMeaning:下一步
    replaceOpt(val){
      console.log(val);
      
      this.activeName = val;
    },
   handleClick(tab, event) {
        console.log(tab, event);
      },
    submitForm(id,status){
      var dataList = { 
        "status":status,
        "data":[]
      }
      //单个产品上下架
    if(!this.isEdit){
      dataList = {
        "status":status,
        "data":[id]
      }
    }else{
      let pro_id = this.$route.params.id
       dataList = { 
        "status":status,
        "data":[pro_id],
      }
    }
     
      
       this.$confirm('是否修改产品上下架状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          putProductStatus(dataList).then(res=>{
        // console.log(res);
        if(res.code == 0){
         
          
          
          if(status == 1){
              this.$router.push({path:'/product/productManager/list'})
              this.$notify({
                message: '产品已成功添加/修改到销售中',
                type: 'success',
                duration: 2000,
              })
           
          }
          else{
            this.$router.push({path:'/product/productManager/list'})
              this.$notify({
                message: '产品已成功添加/修改到仓库中',
                type: 'success',
                duration: 2000,
              })
              
          }
         
          
        }
      })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改产品上下架状态'
          });          
      
    })
       
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-fixed{
    position: fixed;
    bottom: 20px;
    left: 40%;
    z-index: 10;
  }
</style>
